<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航菜单</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-image: url(../img/beijing.jpg);
            background-size: cover;
            background-repeat: repeat;
        }

        .header {
            display: flex;
            width: 100%;
            height: 50px;
            background-color: rgb(148, 148, 228);
        }

        .header a {
            padding-left: 330px;
            line-height: 50px;
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            word-spacing: 5px;
        }

        .video-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .video-item {
            position: relative;
            overflow: hidden;
            width: 570px;
            height: 400px;
        }

        .video-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .video-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 90%;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .video-item:hover img {
            transform: scale(1.2);
        }

        .video-item:hover .video-info {
            opacity: 1;
            visibility: visible;
        }

        .video-info a {
            text-decoration: none;
        }

        div {
            color: rgb(226, 132, 55);
        }
        div p{
            font-size: 18px;
        }

        input:focus {
            background-color: #d0d4d5;
            outline-color: rgb(220, 194, 120);
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="header">
        <a href="#">
            <p>blibli鼠标悬停效果</p>
        </a>
        <a href="./SU7官网.html">
            <p>导航</p>
        </a>
    </div>
    <div class="video-list">
        <div class="video-item">
            <img src="../img/微笑past.jpg" alt="Video 1">
            <div class="video-info">
                <h3>北极星的眼泪</h3>
                <br>
                <p>北极星的眼泪，说不出的想念，原来我们活在两个世界.....</p>
                <br>
                <button><a
                        href="https://www.bilibili.com/video/BV1AK4y1A7ut/?spm_id_from=333.337.search-card.all.click">View
                        in more</a></button>
            </div>
        </div>
        <div>
            <p>键盘焦点：</p><input type="text">
        </div>
</body>

</html>